<template>
	<div class="box">
		<div class="center-box">
			<div class="left">
				<ul>
					<li v-for="item in navList" :key="item.id">{{ item.title }}</li>
				</ul>
			</div>
			<div class="right">
				<div class="userInfo">
                  <div v-if="!haslogin" class="nologin" style="height: 60px; margin-right: 50px ">
                    <a href="javascript:void(0);" style="font-size: 18px" @click="logoinFun(1)">登录&nbsp;</a><span  style="font-size: 18px">|</span><a  style="font-size: 18px" href="javascript:void(0);" @click="logoinFun(0)">&nbsp;注册</a>
                  </div>

                  <div class="nav-size" style="height: 60px;background-color:rgba(240,240,240,0);flex:1; ">
                    <el-menu :default-active="'1'"
                             class="el-menu-demo"
                             mode="horizontal"
                             style="background-color:rgba(240,240,240,0);border: none;display: flex;flex-wrap: nowrap; justify-content: space-between" router>
                      <!-- <el-menu-item index="/front/vip" style="border: none;background-color:rgba(240,240,240,0);position: relative;" class="daohang danghangyou">
                        <img src="../../../assets/huiyuan.png" style="left: 42%;"  alt="" srcset="">
                        <span style="">订购会员</span>
                      </el-menu-item>
                      <el-menu-item index="/front/xinxi" style="border: none;background-color:rgba(240,240,240,0);" class="daohang danghangyou">
                        <img src="../../../assets/xinxin.png"  alt="" srcset="">
                        <span>消息</span>
                      </el-menu-item>
                      <el-menu-item index="/front/dontai" style="border: none;background-color:rgba(240,240,240,0);" class="daohang danghangyou">
                        <img src="../../../assets/dontai.png"  alt="" srcset="">
                        <span>动态</span>
                      </el-menu-item>
                      <el-menu-item index="/front/shoucang" style="border: none;background-color:rgba(240,240,240,0);" class="daohang danghangyou">
                        <img src="../../../assets/choucang.png" alt="" srcset="">
                        <span>收藏</span>
                      </el-menu-item> -->
                      <!-- <el-menu-item index="/front/home" style="border: none;background-color:rgba(240,240,240,0);" class="tougao">
                        <img class="bubian" src="../../../assets/tougao.png"  alt="">
                        投稿
                      </el-menu-item> -->
                    </el-menu>

                  </div>
                  <div v-if="haslogin" class="haslogin" style="height: 60px; margin-right: 50px ">
                    <div style="display:flex; font-size: 12px" class="" @mouseenter="inUser" @mouseleave="outUser">
                      <el-dropdown  class="showUser">
                        <el-dropdown-menu></el-dropdown-menu>
                        <div class="userimg">
                          <div class="userimg_tu inline_block">
                            <!--  -->
                            <img :src="user.avatarUrl" alt="">
                            <transition name="el-fade-in-linear">
                              <div v-show="showUser" class="caidan">
                                <div style="height: 60px;width: 100%;"></div>
                                <div style="width:100%;height: 60px;text-align: center;line-height: 60px;"><h2 style=" font-size: 20px;font-weight: 800">{{user.nickname}}</h2></div>
                                <div style="width:100%;color: #9499a0;">
                                  <div class="inline_block pingjun bianse">文章</div>
                                  <div class="inline_block pingjun bianse">说说</div>
                                  <div class="inline_block pingjun bianse">关注</div>
                                  <div class="inline_block pingjun bianse">粉丝</div>
                                </div>
                                <div class="genr">
                                  <router-link to="/blogChangePassword" style="text-decoration: none">
                                    <span class="genren"><i class="el-icon-key"></i>修改密码</span>
                                  </router-link>
                                </div>
                                <div class="genr" @click="$router.push('/front/user')">
                                  <span style="float: left;">个人中心</span>
                                  <span style="float: right;font-weight: 100;">普通用户</span>
                                </div>
                                <div class="genr" >
                                  <span style="float: left;">金币</span>
                                  <span style="float: right;font-weight: 100;">0 <span>币</span></span>
                                </div>
                                <div class="genr" >
                                  <span style="float: left;">订购会员</span>
                                </div>
                                <div class="genr" >
                                  <span style="float: left;">我的购买</span>
                                </div>
                                <div class="genr">
                                  <span class="genren" style="text-decoration: none" @click="userlogout">退出</span>
                                </div>
                              </div>
                            </transition>

                          </div>
                        </div>
                      </el-dropdown>
                    </div>
                  </div>

                </div>
			</div>
		</div>
	</div>
</template>

<script>
import Rings from '@/common/bg/rings.vue';
// import {
// 	Typeit
// } from '../utils/plug.js'
import Globe from '@/common/bg/globe.vue';
export default {
	name: 'FrontendVue2NEWnav',

	data() {
		return {
			navList:[
				{
					id:1,
					title:'首页'
				},
				{
					id:2,
					title:'AI工具'
				},
				{
					id:3,
					title:'社区'
				},
				{
					id:4,
					title:'AI创新'
				},
				{
					id:5,
					title:'产业合作'
				},
				{
					id:5,
					title:'音乐'
				},
			],
			userInfo: '', //用户信息
			haslogin: false, //是否已登录
			classListObj: '', //分类
			activeIndex: '/', //当前选择的路由模块
			state: '', //icon点击状态
			pMenu: true, //手机端菜单打开
			// path:'',//当前打开页面的路径
			input: '', //input输入内容
			headTou: '', //头像
			projectList: '' ,//项目列表
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      showUser: false
		};
	},

	mounted() {
		
	},
	components: {
    Rings,
    Globe //定义组件

	},
	methods: { //事件处理器


logoinFun: function(msg) { //用户登录和注册跳转
	// console.log(msg);
	// console.log(666,this.$router.currentRoute.fullPath);
	if (msg == 1) {
		this.$router.push('/NewLogin');
	} else {
		this.$router.push('/NewLogin');
	}
},
// 用户退出登录
userlogout: function() {
	var that = this;
	this.$confirm('是否确认退出?', '退出提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		// console.log(that.$route.path);

		this.$store.commit("logoutOn")
		this.$message.info("退出成功")
				that.$message({
					type: 'success',
					message: '退出成功!'
				});
	}).catch(() => {
		//
	});

},
routeChange: function() {
	var that = this;
	that.pMenu = true

	//获取分类

},
getUser(){
	this.request.get("/user/"+this.user.id).then(res=>{
		console.log("Manage"+res.data)
		this.user = res.data
	})
},
outMusicHome(){
	let routeUrl = this.$router.resolve({
		path: "/music/home",
	});
	window.open(routeUrl.href, '_blank');
},
//鼠标悬停头像
inUser(){
	this.showUser =true
},
//鼠标移出
outUser(){
	this.showUser =false
}
},
created() { //生命周期函数
		//判断当前页面是否被隐藏
		if(this.user != null){
		  this.haslogin=true
      // if(this.user.email === null || this.user.address == null|| this.user.avatarUrl == null){
      //   this.$notify({
      //     title: '个人中心',
      //     message: '尊敬的用户您的个人信息尚未完善请移动到个人中心完善个人信息',
      //     offset: 100,
      //     type: 'warning',
      //     duration: 0
      //   });
      // }
    }
		this.routeChange();

	},
	mounted() { //页面元素加载完成
		var that = this;
    var nickname= ""
		if(that.user){
      nickname = this.user.nickname
    }else {
      nickname = "请先登录"
    }
		var timer = setTimeout(function() {
			Typeit(that.$store.state.themeObj.user_start, "#luke",nickname); //打字机效果
			clearTimeout(timer);
		}, 600);
	}
};
</script>

<style lang="less" scoped>
.box{
	width: 100%;
	height: 60px;
	background-color: aqua;
	.center-box{
		width: 1500px;
		height: 100%;
		display: flex;
		margin: 0 auto;
		.left{
			width: 70%;
			height: 100%;
			background-color: crimson;
			ul{
				width: 100%;
				height: 100%;
				display: flex;
				li{
					width: 10%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgb(161, 127, 255);
				}
			}
		}
		.right{
			width: 30%;
			height: 100%;
			background-color: coral;
		}
	}
}
</style>